<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="localPage ? localData : value"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{background:'#f3f6fd', fontFamily:'Helvetica',fontSize:'14px'}"
      border
      highlight-current-row
      @selection-change="handleSelectionChange"
      @row-dblclick="rowDblclick"
      @row-click="rowClick"
      :stripe="true"
    >
      <el-table-column v-if="isShowSelection" lable="选择" type="selection" :width="55">
      </el-table-column>
      <el-table-column
        v-if="isShowSerialNum"
        label="序号"
        prop="name"
        align="center"
        :width="70"
      >
        <template slot-scope="scope"
          ><span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }} </span></template
        >
      </el-table-column>

      <el-table-column
        align="center"
        show-overflow-tooltip
        class-name="el-card__body"
        v-for="(item, index) in tableColumnAttributes"
        :key="index"
        :prop="item.value"
        :label="item.name"
        :width="
          item.type === 'date' ||
          item.type === 'input' ||
          item.type === 'select' ||
          item.type === 'inputNumber' ||
          item.type === 'inputValidNumber' ||
          item.type === 'radioGroup'
            ? 240
            : item.width
        "
      >
        <div v-if="item.type === 'input'" slot-scope="{ row }">
          <el-input
            v-model="row['' + item.value + '']"
            clearable
            show-overflow-tooltip
            :maxlength="item.maxlength"
             :disabled="item.disabled || row.disabled"
            @input="typeof item.action === 'function' ? item.action(row) : ''"
            @focus="typeof item.focus === 'function' ? item.focus(row) : ''"
          />
        </div>
        <div v-else-if="item.type === 'inputValidNumber'" slot-scope="{ row }">
          <el-input
            v-model.number="row['' + item.value + '']"
            clearable
            show-overflow-tooltip
            :maxlength="item.maxlength"
            @input="typeof item.action === 'function' ? item.action(row) : ''"
            @focus="typeof item.focus === 'function' ? item.focus(row) : ''"
          />
        </div>
        <div v-else-if="item.type === 'inputNumber'" slot-scope="{ row }">
          <el-input-number
            :controls="false"
            size="small"
            show-overflow-tooltip
            v-model="row['' + item.value + '']"
            :min="item.minFiled ? item.minFiled : 0"
            :precision="item.precision ? row['' + item.precision + ''] : 0"
            :max="
              item.maxFiled
                ? item.maxFiled
                : item.maxFiledName
                ? row[item.maxFiledName]
                : 999999
            "
            :disabled="item.disabled || row.disabled"
            @keydown.native="typeof item.keydown === 'function' ? item.keydown(row) : ''"
            @change="typeof item.action === 'function' ? item.action(row) : ''"
          ></el-input-number>
        </div>

        <div v-else-if="item.type === 'text'" slot-scope="{ row }">
          <span>{{ row["" + item.value + ""] }}</span>
        </div>
        <div v-else-if="item.type === 'dict'" slot-scope="{ row }">
          <span>{{ row[item.value] | dictFilter(item.dict) }}</span>
        </div>
        <div v-else-if="item.type === 'radioGroup'" slot-scope="{ row }">
          <el-radio-group
            v-model="row['' + (item.valueId ? item.valueId : item.value) + '']"
            size="mini"
            :disabled="item.disabled"
          >
            <el-radio-button
              v-for="item in item.options"
              :key="item.index"
              :value="item.text"
              :label="item.value"
            >
            </el-radio-button>
          </el-radio-group>
        </div>
        <div v-else-if="item.type === 'render'" slot-scope="{ row }">
          <span :style="item.color ? item.color : ''">{{
            item.render
              ? item.render(row, row[`${item.value}`])
              : row["" + item.value + ""]
          }}</span>
        </div>
         <div v-else-if="item.type === 'renderHtml'" slot-scope="{ row }">
          <span v-html="item.render
              ? item.render(row, row[`${item.value}`])
              : row['' + item.value + '']"></span>
        </div>
        <div v-else-if="item.type === 'select'" slot-scope="{ row }">
          <el-select
            clearable
            :multiple="item.multiple ? true : false"
            :filterable="item.filterable ? true : false"
            v-model="row['' + (item.valueId ? item.valueId : item.value) + '']"
            placeholder="请选择"
            @change="typeof item.action === 'function' ? item.action(row) : ''"
            @blur="typeof item.blurFun === 'function' ? item.blurFun($event, row) : ''"
            @focus="typeof item.focusFun === 'function' ? item.focusFun(row) : ''"
            :disabled="item.disabled || row.disabled"
          >
            <!--<el-option value="-1" label="全部">全部</el-option>-->
            <!--<el-option value="1" label="正常">正常</el-option>-->
            <!--<el-option value="0" label="冻结">冻结</el-option>-->
            <el-option
              v-for="(item, index) in item.options"
              :key="index"
              :value="item.id"
              :label="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div v-else-if="item.type === 'date'" slot-scope="{ row }">
          <el-date-picker
            v-model="row['' + item.value + '']"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
             :disabled="item.disabled || row.disabled"
          >
          </el-date-picker>
        </div>
        <div v-else-if="item.type === 'img'" slot-scope="{ row }">
          <!-- :size="size" -->
          <el-image
            shape="square"
            class="imageClass"
            :preview-src-list="[row['' + item.value + '']]"
            :src="
              row['' + item.value + '']
                ? row['' + item.value + '']
                : 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'
            "
          ></el-image>
        </div>
        <div v-else-if="item.type === 'switch'" slot-scope="{ row }">
          <el-switch
            v-permission="item.switchPer"
            v-model="row['' + item.valueId + '']"
            active-color="#13ce66"
            :active-text="row['' + item.value + '']"
            :active-value="item.activeValue"
            :inactive-value="item.inactiveValue"
             :disabled="item.disabled || row.disabled"
            @change="typeof item.action === 'function' ? item.action(row) : ''"
          >
          </el-switch>
        </div>
        <div v-else-if="item.type === 'switchEn'" slot-scope="{ row }">
          <el-switch
            v-permission="item.switchPer"
            v-model="!row['' + item.valueId + '']"
             :disabled="item.disabled || row.disabled"
            active-color="#13ce66"
            :active-text="row['' + item.value + '']"
            @change="typeof item.action === 'function' ? item.action(row) : ''"
          >
          </el-switch>
        </div>
        <div v-else>
          <span>{{ row["" + item.value + ""] }}</span>
        </div>
      </el-table-column>
      <el-table-column v-if="isShowCheck" label="选择" align="center" width="80">
        <template v-slot="{ row, column, $index }">
          <slot name="checkbox" :row="row" :column="column" :index="$index" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="hasAction"
        fixed="right"
        label="操作"
        :width="width"
        align="center"
        highlight-current-row="true"
      >
        <template v-slot="{ row, column, $index }">
          <slot name="action" :row="row" :column="column" :index="$index" />
        </template>
      </el-table-column>
    </el-table>
    <el-row
      type="flex"
      justify="space-between"
      style="margin-top: 10px; text-align: left"
    >
      <el-col class="allNumStyle">
        <slot name="allNum"></slot>
      </el-col>
      <el-col align="right">
        <el-pagination
          v-show="isShowPage == 'undefined' || isShowPage == null ? true : isShowPage"
          layout="total, sizes, prev, pager, next"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          :total="totalCount"
          :hide-on-single-page="isShow"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDict } from "@/utils/index";
export default {
  name: "DataTable",
  props: {
    hasAction: {
      type: Boolean,
      default: false,
    },
    isShowCheck: {
      type: Boolean,
      default: false,
    },
    tableColumnAttributes: {
      type: Array,
      default: () => [],
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100],
    },
    totalCount: {
      type: Number,
      default: 0,
    },
    height: {
      type: Number,
      default: 0,
    },
    isShowSelection: false,
    isShowPage: true,
    value: {
      type: Array,
      default: () => [],
    },
    isShow: {
      type: Boolean,
      default: false,
    },
    isShowSerialNum: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number,
      default: 100,
    },
    localPage: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  computed: {
    tabelData() {
      return this.value;
    },
  },
  watch: {
    value: {
      deep: true,
      handler: function (newValue, oldValue) {
        this.localPage && this.formtPageData();
      },
    },
  },

  filters: {
    dictFilter(val, dict) {
      let item;
      if (Array.isArray(dict)) {
        item = dict.find((item) => item.value === val);
      } else {
        item = getDict([dict])[dict].find((item) => item.value === val);
      }
      if (!item) return "";
      return item.text || "";
    },
  },
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      tableHeight: 552,
      localData: [], // 本地数据 仅当localPage为true时，表本地分页之后有效
    };
  },
  created() {
    if (this.localPage) {
      this.formtPageData();
    }
  },
  methods: {
    rowHeight() {
      setTimeout(() => {
        if (this.value && this.value.length > 0) {
          if (this.hasAction) {
            this.tableHeight = this.value.length * 53 + 45;
          } else {
            this.tableHeight = this.value.length * 44 + 45;
          }
        } else if (this.height > 0) {
          this.tableHeight = this.height;
        }
      }, 1000);
    },
    handleSizeChange(pageSize) {
      this.rowHeight();
      this.pageSize = pageSize;
      this.localPage ? this.formtPageData() : this.$emit("size-change", pageSize);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.localPage ? this.formtPageData() : this.$emit("current-change", currentPage);
    },
    handleSelectionChange(selection) {
      this.$emit("selection-change", selection);
    },
    rowDblclick(row) {
      this.$emit("row-dblclick", row);
    },
    rowClick(row) {
      this.$emit("row-click", row);
    },
    // 本地分页函数
    formtPageData() {
      const data = Object.assign([], this.tabelData);
      this.localData = data.splice(
        parseInt(this.currentPage * this.pageSize - this.pageSize),
        parseInt(this.pageSize)
      );
    },
  },
  mounted() {
  },
};
</script>

<style lang="scss" scoped>
.el-card__body {
  padding: 5px;
  color: red;
}
.allNumStyle {
  margin-top: 10px;
}
.imageClass {
  width: 50px;
  height: 50px;
}
</style>
